<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { Lunar, LunarMonth } from 'lunar-typescript';
  import LunarCalendar from './components/LunarCalendar.vue'
  const localTime = ref('00:00')
  const weatherData = ref({
    city: '',
    weather: '',
    temperature: '',
    windPower: '',
    windDirection: '',
    humidity: '',
    nightTemp: '',
    dayTemp: '',
    picUrl: ''
  })
  const lunarData = reactive({
    date: '',
    week: '',
    yearInGanZhi: '',
    yearShengXiao: '',
    monthInChinese: '',
    lunarDay: '',
    fesOrJieqi: ''
  })
  // 天气
  const initAMap = () => {
    AMapLoader.load({
      key: '966707422b918a1050731e5bafdcadc6',               // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0',                  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Weather']       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      AMap.plugin('AMap.CitySearch', function() {
        const citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            console.log(result, '当前城市')
            //加载天气查询插件
            AMap.plugin('AMap.Weather', function() {
              var weather = new AMap.Weather();
              //查询实时天气信息
              weather.getLive(result.city, function(err, data) {
                console.log(err, data, '实时天气信息')
                const {
                  city,
                  weather,
                  temperature,
                  windPower,
                  windDirection,
                  humidity
                } = data || {}
                weatherData.value.city = city
                weatherData.value.weather = weather
                weatherData.value.temperature = temperature
                weatherData.value.windPower = windPower
                weatherData.value.windDirection = windDirection
                weatherData.value.humidity = humidity
                weatherData.value.picUrl = '/no.png'
                if (weather.includes('晴')) weatherData.value.picUrl = '/qing.png'
                if (weather.includes('云')) weatherData.value.picUrl = '/duoyun.png'
                if (weather.includes('阴')) weatherData.value.picUrl = '/yin.png'
                if (weather.includes('雨')) weatherData.value.picUrl = '/yu.png'
                if (weather.includes('雾')) weatherData.value.picUrl = '/wu.png'
                if (weather.includes('霾')) weatherData.value.picUrl = '/mai.png'
                if (weather.includes('雪')) weatherData.value.picUrl = '/xue.png'
                if (weather.includes('雨夹雪')) weatherData.value.picUrl = '/yujiaxue.png'
                if (weather.includes('风')) weatherData.value.picUrl = '/dafeng.png'
                if (weather.includes('冰')) weatherData.value.picUrl = '/bingbao.png'
                if (weather.includes('雷')) weatherData.value.picUrl = '/leizhenyu.png'
                if (weather.includes('沙')) weatherData.value.picUrl = '/shachenbao.png'
              })
              weather.getForecast(result.city, function(err, data) {
                console.log(err, data, '未来天气信息')
                const {
                  forecasts
                } = data || {}
                const today = forecasts[0]
                weatherData.value.nightTemp = today.nightTemp
                weatherData.value.dayTemp = today.dayTemp
              })
            })
          }
        })
      })
    })
  }
  // 黄历
  const initLunar = () => {
    const lunar = Lunar.fromDate(new Date())
    const n = new Date()
    const y = n.getFullYear()
    const m = n.getMonth() + 1
    const d = n.getDate()
    lunarData.date = `${y}/${m}/${d}`
    const day = n.getDay()
    const weekL = ['日', '一', '二', '三', '四', '五', '六']
    lunarData.week = weekL[day]
    lunarData.yearInGanZhi = lunar.getYearInGanZhi()
    lunarData.yearShengXiao = lunar.getYearShengXiao()
    lunarData.monthInChinese = lunar.getMonthInChinese()
    lunarData.lunarDay = lunar.getDayInChinese()
    let curFesList = lunar.getFestivals()
    let curFes = ''
    if (curFesList.length) {
      curFes = curFesList[0]
    }
    let curJieqi = ''
    const jq = lunar.getCurrentJieQi()
    if (jq) {
      curJieqi = jq.getName()
    }
    lunarData.fesOrJieqi = curFes || curJieqi
  }
  onMounted(() => {
    setInterval(() => {
      localTime.value = new Date().toLocaleTimeString()
    }, 1000);
    initAMap()
    initLunar()
  })
</script>

<template>
  <div class="container">
    <div class="nav">
      <div class="time">{{ localTime }}</div>
    </div>

    <div class="city-info">
      <div class="weather-box">
        <div class="city-name">{{weatherData.city}}</div>
        <div class="weather-pic">
          <img :src="weatherData.picUrl" alt="" />
        </div>
        <p class="weather">{{weatherData.weather}}</p>
      </div>
      
      <h2 class="temp">
        <em>{{weatherData.temperature}}℃</em>
        <span>{{ weatherData.nightTemp }}℃ ~ {{ weatherData.dayTemp }}℃</span>
      </h2>
      <div class="detail">
        <span>风力：{{weatherData.windPower}} 级</span> |
        <span>风向：{{weatherData.windDirection}}</span> |
        <span>空气湿度：{{weatherData.humidity}}</span>
      </div>
      <div class="detail">
        <span>{{lunarData.date}}</span>&nbsp;
        <span>星期{{lunarData.week}}</span>&nbsp;
        <span>{{lunarData.yearInGanZhi}}({{ lunarData.yearShengXiao}})年</span>&nbsp;
        <span>{{lunarData.monthInChinese}}月{{ lunarData.lunarDay}}</span>&nbsp;
        <span>{{lunarData.fesOrJieqi}}</span>
      </div>
    </div>

    <LunarCalendar />
  </div>
</template>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .container {
    min-height: 100vh;
    background-color: #000;
    opacity: 0.6;
    color: #fff;
  }

  .nav {
    overflow: auto;
    padding: 10px;
  }

  .time {
    float: left;
    font-size: 20px;
  }

  .city-name {
    font-size: 32px;
  }
  .weather{
    font-size: 24px;
  }

  .city-info {
    text-align: center;
  }

  .temp {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .temp em {
    font-style: normal;
    font-size: 34px;
  }
  .temp span {
    font-size: 14px;
    margin-left: 24px;
  }
  .weather-box{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .weather-pic{
    margin: 0 24px;
  }
</style>